<template>
  <div class="wrapper" :class="type">
    <div class="title_img">
      <div>线下人工服务</div>
    </div>
    <div class="title_imgX">专业客服1V1服务，全程托管直至成交。</div>
    <div class="wrappericon">
        <ul>
          <li>
            <img src="~/@/assets/img/zt/artificial1.png">
            <div>人工服务</div>
          </li>
          <li>
            <img src="~/@/assets/img/zt/artificial2.png">
            <div>筛选客户</div>
          </li>
          <li>
            <img src="~/@/assets/img/zt/artificial3.png">
            <div>推荐客户</div>
          </li>
          <li class="left_margin">
            <img src="~/@/assets/img/zt/artificial4.png">
            <div>跟踪客户</div>
          </li>
          <li class="right_margin">
            <img src="~/@/assets/img/zt/artificial5.png">
            <div>撮合议价</div>
          </li>
          <li>
            <img src="~/@/assets/img/zt/artificial6.png">
            <div>协助签约</div>
          </li>
          <li>
            <img src="~/@/assets/img/zt/artificial7.png">
            <div>监督服务</div>
          </li>
          <li>
            <img src="~/@/assets/img/zt/artificial8.png">
            <div>售后服务</div>
          </li>
        </ul>
        <div class="experience" @click="is_show()">全程托管</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CompanyProvide',
  props: {
    type: String
  },
  methods: {
    is_show () {
      this.$emit('is_show', true)
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  width 100%
  border-radius 5px
  padding 0rem /* 26/50 */ .4rem 0rem /* 28/50 */ .4rem
  position relative
  margin-top 1.06rem /* 53/50 */
  .title_da
    font-size .7rem /* 35/50 */
    height 1.1rem /* 55/50 */
    line-height 1.1rem /* 55/50 */
    text-align center
    font-weight 800
    color rgba(0,0,0,.9)
  .title_xiao
    font-size .28rem /* 14/50 */
    text-align center
    color rgba(0,0,0,.7)
    line-height .46rem /* 23/50 */
    margin-bottom .4rem /* 20/50 */
  .title_img
    width 100%
    height .8rem /* 40/50 */
    line-height .8rem /* 40/50 */
    background-image url('../../../assets/img/one/iconbg.png')
    background-size 6.34rem /* 317/50 */ 100%
    background-repeat no-repeat
    background-position center
    margin-top .84rem /* 42/50 */
    display flex
    position relative
    text-align center
    div
      width 100%
      font-size .48rem /* 24/50 */
      color #fff
      font-weight bold
  .title_imgX
    text-align center
    font-size .28rem /* 14/50 */
    margin-top .3rem /* 15/50 */
    margin-bottom .48rem /* 24/50 */
  .wrappericon
    width 100%
    height 9.1rem /* 495/50 */
    border-radius .1rem /* 5/50 */
    padding-top .06rem /* 3/50 */
    ul
      width 100%
      height 9rem /* 490/50 */
      background #ffffff
      border-radius .1rem /* 5/50 */
      padding-bottom .7rem /* 35/50 */
      padding .7rem /* 35/50 */ .1rem /* 15/50 */
      li
        width 27%
        float left
        text-align center
        margin-right 3%
        margin-left 3%
        img
            width 100%
            height 2.04rem /* 102/50 */
      .left_margin
        margin-left 1.22rem /* 61/50 */
      .right_margin
        margin-right 1.22rem /* 61/50 */
  .experience
    width 84%
    position absolute
    left 8%
    bottom  -.34rem /* 17/50 */
    height 1rem /* 45/50 */
    line-height 1rem
    text-align center
    border-radius .1rem /* 5/50 */
    font-size .4rem /* 20/50 */
    font-weight bold
    color #fff
.one
  .title_img
    width 100%
    background-image url('../../../assets/img/one/iconbg.png')
  .wrappericon
    background #D77D50
  .title_imgX
    color rgba(185, 72, 10, .7)
  .title
    color #652705
  .experience
    background #B9480A
    border 2px solid #AD4309
    box-shadow 0px 3px 0px 0px rgba(126, 47, 4, 0.3)
.two
  .title_img
    width 100%
    background-image url('../../../assets/img/two/iconbg.png')
  .wrappericon
    background #E66D71
  .title_imgX
    color rgba(195, 8, 14, .7)
  .title
    color #7D0509
  .experience
    background #C3080E
    border 2px solid #B4070B
    box-shadow 0px 3px 0px 0px rgba(167, 5, 9, 0.3)
.there
  .title_img
    width 100%
    background-image url('../../../assets/img/there/iconbg.png')
  .wrappericon
    background #7AA1F1
  .title_imgX
    color rgba(8, 91, 149, .7)
  .title
    color #05385C
  .experience
    background #085B95
    border 2px solid #095194
    box-shadow 0px 3px 0px 0px rgba(93, 162, 223, 0.5)
</style>
